<template>
  <el-card shadow="never">
    <template #header>
      <el-form label-width="80px">
        <el-row :gutter="24">
          <el-col :span="6" :xs="24">
            <el-form-item label="用户姓名">
              <el-input v-model="page.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="手机号码">
              <el-input v-model="page.phone"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label-width="100px" label="身份证号码">
              <el-input v-model="page.idcard"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="邮箱">
              <el-input v-model="page.email"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="注册渠道">
              <el-input v-model="page.registerChannel"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="贷超APP">
              <el-select v-model="page.appId" style="width: 100%" clearable>
                <el-option v-for="item in productList" :key="item.appId" :label="item.appName"
                           :value="item.appId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="是否申请">
              <el-select v-model="page.isLoan" style="width: 100%" clearable>
                <el-option label="未申请"
                           :value="0"></el-option>
                <el-option label="已申请"
                           :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10" :xs="24">
            <el-form-item label="注册时间">
              <el-date-picker
                  style="width: 100%"
                  v-model="page.createTimeValue"
                  type="daterange"
                  range-separator="~"
                  value-format="x"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label-width="20px">
              <el-button type="primary" @click="getTableData">查询</el-button>
              <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
    </template>
    <Table :tableData="tableData" :tableColumn="tableColumn" :page="page"
           @handleCurrentChange="(val)=>{page.pageNum = val,getTableData()}"
           @handleSizeChange="(val)=>{page.pageSize = val,getTableData()}"
    >
      <template #gender="{row}">
        {{ row.gender === '0' ? '女' : row.gender === '1' ? '男' : '' }}
      </template>
      <template #handle="{row}">
        <el-button type="text" @click="createCode(row)">生成验证码</el-button>
        <el-button type="text" @click="resetPassword(row)">重置密码</el-button>
      </template>
    </Table>
    <Dialog v-model="visibleCode" title="生成验证码" :footer="false">
      <el-form label-width="80px">
        <el-form-item label="手机号">
          <span style="font-size: 14px">{{ tableRows.phone }}</span>
        </el-form-item>
        <el-form-item label="验证码">
          <el-button style="font-size: 14px" type="text" @click="copyCode(tableRows.code)">{{
              tableRows.code
            }}
          </el-button>
        </el-form-item>
      </el-form>
    </Dialog>
  </el-card>
</template>

<script>
import {onMounted, reactive, toRefs,} from "vue";
import {fetchUserList, updateResetPassword, createValidateCode} from '@/api/user'
import {ElMessage, ElMessageBox} from "element-plus";
import {dateFormatTimeStamp} from '@/utils/index'
import {selectProductList} from "@/api/index"

const tableColumn = [
  {label: '贷超APP', prop: 'appName', align: 'center', minWidth: 100},
  {label: '用户姓名', align: 'center', prop: 'name', minWidth: 150},
  {label: '手机号码', align: 'center', prop: 'phone', minWidth: 150},
  {label: '身份证号码', align: 'center', prop: 'idcard', minWidth: 150},
  {label: '邮箱', align: 'center', prop: 'email', minWidth: 150},
  {label: '性别', align: 'center', prop: 'gender', slot: 'gender',},
  {label: '年龄', align: 'center', prop: 'age', },
  {label: '设备类型', align: 'center', prop: 'osType'},
  {label: '是否申请', align: 'center', prop: 'isLoan'},
  {label: '注册渠道', align: 'center', prop: 'registerChannel', minWidth: 150},
  {label: '注册时间', align: 'center', prop: 'creationTime', minWidth: 150},
  {label: '操作', align: 'center', prop: 'handle', slot: 'handle', fixed: 'right', minWidth: 100},
]
export default {
  name: "UserList",
  setup() {
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      visibleCode: false,
      productList: [],
      tableRows: {}
    })
    const methods = {
      async getTableData() {
        const [registerStartTime, registerEndTime] = dateFormatTimeStamp(state.page.createTimeValue)
        const params = {
          registerStartTime, registerEndTime,
          ...state.page
        }
        delete params.createTimeValue
        const res = await fetchUserList(params)
        if (res.code === 200) {
          const {list, total} = res.data
          state.tableData = list.map(item => {
            item.isLoan = item.isLoan === 0 ? '未申请' : '已申请'
            return item
          })
          state.page.total = total
        }
      },
      resetSearch() {
        state.page = {
          pageNum: 1,
          pageSize: 10,
          total: 0
        }
        methods.getTableData()
      },
      resetPassword({userId}) {
        ElMessageBox.confirm('确认重置密码?', '提示', {
          type: 'warning',
        }).then(async () => {
          const res = await updateResetPassword({userId})
          if (res.code === 200) {
            ElMessage.success('重置成功')
            methods.getTableData()
          }
        }).catch(() => {

        });
      },
      getSelect() {
        selectProductList().then(res => {
          if (res.code === 200) {
            state.productList = res.data
          }
        })
      },
      async createCode({phone, appId}) {
        const res = await createValidateCode({phone, appId})
        if (res.code === 200) {
          state.tableRows = {phone, code: res.message}
          state.visibleCode = true
        }
      },
      copyCode(value) {
        let input = document.createElement("input");
        input.value = value
        document.body.appendChild(input);
        input.select()
        document.execCommand('copy')
        this.$message.success('复制成功')
        document.body.removeChild(input);
      },
    }
    onMounted(() => {
      methods.getTableData()
      methods.getSelect()
    })
    return {
      ...toRefs(state),
      tableColumn,
      ...methods
    }
  }
}
</script>

<style scoped>

</style>
